<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jq/jquery.js"></script>
</head>
<body>

    <!-- 
        原生的ajax语法还是jquery ajax语法都需要注意如下要求：
            1.传递的数据是FormData构建数据对象(二进制数据对象)
            2.ajax文件上传操作，需要将请求类型Content-Type设置为multipart/form-data
            3.文件为大数据参数，文件上传只能使用具有请求体的请求(post、put.....)
            4.通过表单的input标签类型file表单元素提供用户选择操作


     -->
    <form id="data">
        <input type="text" name="username"> 
        <br><br>
        <textarea cols="30" rows="10" name="info"></textarea> 
        <br><br>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
        <input type="radio" name="sex" value="未知">未知
        <br><br>
        <input type="checkbox" name="skill" value="html">html
        <input type="checkbox" name="skill" value="css">css
        <input type="checkbox" name="skill" value="JS">JS
        <input type="checkbox" name="skill" value="echarts">echarts
        <br><br>
        <select name="a">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <br><br>
        <input type="file" name="pic">
       <br>
       <br>
       <input type="button" value="发送请求" onclick="doUpload()">
    </form>
    <script>


        /* 
            jquery ajax的定义主要是为普通ajax请求(简单参数请求)提供简化的功能操作
            为了简化方法使用，post默认请求头Content-Type: application/x-www-form-urlencoded; charset=UTF-8
            所以jquery ajax文件上传时需要手动关闭jquery对Content-Type的设置，通过contentType:false完成
            jquery ajax定义的参数如果是对象数据，默认都会被完成查询参数的转换(key=value&key=value)
            所以jquery ajax文件上传时候需要关闭jquery对象data数据的转换设置，通过processData:false完成

            xhr:function
            在发送ajax前，对XMLHttpRequest进行重新设定
                取值为function(){},该方法执行于jquery ajax请求构建之前
                方法内部可以通过jquery工具函数$.ajaxSetting获取当前ajax的所有配置，在配置中存在方法xhr，通过执行该方法可以获取当前请求构建XMLHttpRequest对象
                必须将重新设定的XMLHttpRequest对象作为返回值返回，如果没有返回，当前ajax将不会发送请求

            FormData的作用
                1.模拟html表单，相当于将html表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
                2.异步上传二进制文件
                3.表单中需要提交的表单元素必须添加name属性
                new FormData(form的DOM对象);

        */
        function doUpload(){
           

            let fd=new FormData($("#data")[0]);
            $.ajax({
                url:"/jquery/upload",
                data:fd,
                method:"post",
                contentType:false,//关闭jquery的默认值，由XMLHttpRequest自动识别
                processData:false,//关闭jquery对data的自动转换
                // xhr:function(){
                //     // console.log($.ajaxSettings);//获取当前的所有配置
                //     let newXHR=$.ajaxSettings.xhr();//通过xhr方法获取当前请求所对应的XMLHttpRequest对象
                //     newXHR.upload.onprogress=function(e){//监听上传的进度
                //         console.log(e);
                //     };
                //     return newXHR;
                // },
                success:function(data){
                    console.log(data);
                }
            });
        }
    </script>
</body>
</html>